import { DatePicker } from 'antd';
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import moment from 'moment';
const MonthPicker = DatePicker.MonthPicker;

class MyRangePicker extends Component {
  constructor(props) {
      super(props);
      var newState = {};

      if(props.defaultValue){
        newState.startValue = props.defaultValue[0];
        newState.endValue = props.defaultValue[1];
      }
      if(props.format){
        newState.format = props.format;
      }
      // this.setState(newState);
      this.state.startValue = newState.startValue;
      this.state.endValue = newState.endValue;
      this.state.format = newState.format;
  }

  state = {
    format: 'YYYY-MM',
    startValue: null,
    endValue: null,
    endOpen: false,
  };
  componentWillReceiveProps(nextProps) {


  }


  disabledStartDate = (startValue) => {
    const endValue = this.state.endValue;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  }

  disabledEndDate = (endValue) => {
    const startValue = this.state.startValue;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  }

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
    let startValue = null;
    let endValue = null;
    let startDate = '';
    let endDate = '';

    if(field == 'startValue'){
      startValue = value;
      startDate = value.format(this.state.format);
      endValue = this.state.endValue;
      endDate = this.state.endValue.format(this.state.format);
    }else{
      endValue = value;
      endDate = value.format(this.state.format);
      startValue = this.state.startValue;
      startDate = this.state.startValue.format(this.state.format);
    }

    this.props.onChange([startValue, endValue], [startDate, endDate]);

  }

  onStartChange = (value) => {
    this.onChange('startValue', value);
  }

  onEndChange = (value) => {
    this.onChange('endValue', value);
  }

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  }

  render() {
    // let startValue = this.props.defaultValue[0];
    // let endValue = this.props.defaultValue[1];
    // let format = this.props.format;

    return (
      <span>
        <MonthPicker
          allowClear={false}
          disabledDate={this.disabledStartDate}
          format={this.state.format}
          value={this.state.startValue}
          placeholder="开始"
          onChange={this.onStartChange}
          onOpenChange={this.handleStartOpenChange}
          style={{width: 100}}
        />
        <span> - </span>
        <MonthPicker
          allowClear={false}
          disabledDate={this.disabledEndDate}
          format={this.state.format}
          value={this.state.endValue}
          placeholder="结束"
          onChange={this.onEndChange}
          open={this.state.endOpen}
          onOpenChange={this.handleEndOpenChange}
          style={{width: 100}}
        />
      </span>
    );
  }
}

// MyRangePicker.propTypes = {
//     startDate: PropTypes.string,
//     endDate: PropTypes.string,
//     defaultValue: PropTypes.string,
//     format: PropTypes.string,
// };

export default connect()(MyRangePicker);
